<% layout('boilerplate') -%>
<link rel="stylesheet" href="/lib/swiper/css/swiper.min.css" />
<link rel="stylesheet" href="<%= linkPath %>/css/mechanism.css" />
<link rel="stylesheet" href="<%= linkPath %>/css/mechanismresponsive.css" />

<script type="text/javascript" src="/lib/swiper/js/swiper.min.js"></script>
<script type="text/javascript" src="/lib/swiper/js/swiper.animate1.0.3.min.js"></script>

<script>
    window.linkPath = '<%= linkPath %>'
</script>

<!--轮播图-->
<div id="process" class="container-fluid">
    <div class="mask" style="position: absolute;z-index: 70;display: inline-block;width: 100%;padding: 0;height: 100%;background: rgba(255,255,255,0.5);"></div>
    <div class="back-left" style="position: absolute;z-index: 50;
    width: 70%;
    left: 0;
    bottom: 0;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url('<%= linkPath %>/images/mechanism/russia_bj.jpg')">

    </div>
    <div class="back-right" style="position: absolute;
    z-index: 50;
    width: 70%;
    right: 0;
    bottom: 0;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 100%;background-image: url('<%= linkPath %>/images/mechanism/america_bj.jpg')">

    </div>
    <div class="container" style="position: relative;z-index: 99">
        <div class="row">
            <div class="banner-swiper banner-swiper-container swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img style="width: 100%" src="<%= linkPath %>/images/mechanism/china_bj.jpg" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img class="swiper-lazy" style="width: 100%" data-src="<%= linkPath %>/images/mechanism/america_bj.jpg" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img class="swiper-lazy" style="width: 100%" data-src="<%= linkPath %>/images/mechanism/thailand_bj.jpg" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img class="swiper-lazy" style="width: 100%" data-src="<%= linkPath %>/images/mechanism/malaysia_bj.jpg" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img class="swiper-lazy" style="width: 100%" data-src="<%= linkPath %>/images/mechanism/russia_bj.jpg" alt="">
                    </div>
                    <!--<div class="swiper-slide">-->
                        <!--<img class="swiper-lazy" style="width: 100%" data-src="<%= linkPath %>/images/mechanism/gelujiya_bj.jpg" alt="">-->
                    <!--</div>-->
                </div>
                <!-- Add Pagination -->
                <div class="banner-swiper-pagination swiper-pagination"></div>
            </div>
        </div>
    </div>
</div>

<div style="text-align: center;">
    <span class="tips hide">加载中...请稍后</span>
</div>
<!--轮播图-->
<!--国内方案-->
<div class="container processBox china">

</div>
<!--国内方案-->
<script>
    $(function () {
        var winWidth = $(window).width();
        //Initiat WOW JS
        new WOW({animateClass: 'animated'}).init();
        //首页轮播
        var hText = ['国内', '美国', '泰国', '马来西亚', '俄罗斯'];
        var locId = [3,0,1,2,4]
        var pText = ['国内医疗机构', '美国医疗机构', '泰国医疗机构', '马来西亚医疗机构', '俄罗斯医疗机构'];
        var imgSrc=[ linkPath + '/images/mechanism/china_icon.png',linkPath + '/images/mechanism/america_icon.png',linkPath + '/images/mechanism/thailand_icon.png',linkPath + '/images/mechanism/malaysia_icon.png',linkPath + '/images/mechanism/russia_icon.png'];
        var imgSrc_bj=[ linkPath + '/images/mechanism/china_bj.jpg',linkPath + '/images/mechanism/america_bj.jpg',linkPath + '/images/mechanism/thailand_bj.jpg',linkPath + '/images/mechanism/malaysia_bj.jpg',linkPath + '/images/mechanism/russia_bj.jpg'];
        var swiper = new Swiper('.banner-swiper-container', {
            pagination: {
                el: '.banner-swiper-pagination',
                clickable: false,   //取消点击切换，改为手动控制
                renderBullet: function (index, className) {
                    return '<div class="swiper-pagination-customs ' + className +
                        '" ><div class="banner-left hidden-xs"><img src="'+imgSrc[index]+'" alt=""></div><div class="banner-right">' +
                        '<h6 class="banner-title text-center">'+ hText[index] +'</h6>' +
                        '<p class="banner-p hidden-sm hidden-xs">'+ pText[index] +'</p></div></div>';
                },
            },
            on:{
                slideChange:function () {
                    changePage(this.activeIndex);
                }
            },
            // loop:true,
            autoplay:false,
            // autoplay:{
            //     delay:5000,
            //     //如果设置为false，用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay
            //     disableOnInteraction:false
            // },
            lazy: {
                loadPrevNext: false,
            }
        });


        function  isIe() {
            var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
            var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器
//            var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器
            var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;

            if(isIE || isIE11){
                return true;
            }
            return false;
        }

        if(isIe()){
            var hStr = $('.swiper-slide img').height() + 'px';
            $("#process").css('height',hStr);
            $("#process .swiper-wrapper").css('height',hStr);
        }

        $(document).on('click', '.swiper-pagination-customs' ,function () {
            var $this = $(this);
            if($this.hasClass('nodrop')) return ;  //终止
            var $thisIndex = $this.index();
            swiper.slideTo($thisIndex); //手动控制
            $this.addClass("nodrop");   //添加限制类
            $(".swiper-slide").eq($thisIndex).addClass("swiper-no-swiping"); //禁止滑动
            $(".tips").removeClass("hide"); //显示提示
            setTimeout(function () {
                resetContainer($thisIndex);

                $(".swiper-slide").eq($thisIndex).removeClass("swiper-no-swiping");
                $(".tips").addClass("hide");
                $this.removeClass("nodrop");
            },500)
            changePage($thisIndex);
        });

        function changePage($thisIndex) {
            var str = resetContainer($thisIndex);
            $('#resText').html('');
            $('#resText').append(str);

            swiper.slideTo($thisIndex); //手动控制

            //替换背景两张图
            var $left_bg =  $('#process .back-left');
            var $right_bg =  $('#process .back-right');
            var temp_right_Idx,temp_left_Idx;
            if($thisIndex == 4){
                temp_left_Idx = $thisIndex - 1;
                temp_right_Idx = 0;
            }else if($thisIndex == 0){
                temp_left_Idx = 4;
                temp_right_Idx = $thisIndex + 1;
            }else {
                temp_left_Idx = $thisIndex - 1;
                temp_right_Idx = $thisIndex + 1;
            }

            $right_bg.css('background-image','url('+ imgSrc_bj[temp_right_Idx] +')');
            $left_bg.css('background-image','url('+ imgSrc_bj[temp_left_Idx] +')')


            //解除
            $(".swiper-slide").eq($thisIndex).removeClass("swiper-no-swiping");
            $(".tips").addClass("hide");
            $(".swiper-pagination-customs").eq($thisIndex).removeClass("nodrop");

        }

        var getTitle = function (tilte) {
            return '<div class="process-title">\n' +
                '            <span></span>\n' +
                '            <h2>'+ tilte +'</h2>\n' +
                '        </div>'
        }

        var  getImgStr = function (imgArr) {
            var str = '';
            imgArr.forEach(function (v) {
                str += getImgBox(v)
            })
            return str;
        }

        var getImgBox = function (src) {
            return '<div class="imgBox row">\n' +
                '           <img src="'+ src +'" alt="">\n' +
                '       </div>'
        }

        var getTextList = function (arr) {
            var str = '<div class="textBox"><p>';
            str += arr.join('</p><p>');
            str += '</p></div>'
            return str;
        }

        var mapArr = [
            [
                {title:'标准试管服务流程',isImg:true,content:['<%= linkPath %>/images/process/china/china1.jpg']},
                {title:'试管服务内容',isImg:false,content:['· 促排卵药物','· 促排期间B超监测','· 促排期间激素检测','· 手术及胚胎实验费用：取卵、取精、精液处理、精子优化、体外受精（IVF/ICSI）、胚胎培养、囊胚培养、胚胎冷冻保存（1年）','· 一次胚胎移植（鲜胚或冻胚）','· 验孕']},
                {title:'适应人群',isImg:false,content:['1.输卵管梗阻的患者。','2.不明原因的不孕症患者，通过人工授精等治疗未能怀孕。','3.男方重度少弱精，或男方无精症，需经睾丸或附睾穿刺获取精子者。','4.子宫内膜异位症伴不孕的妇女可以酌情采用IVF助孕。','5.排卵障碍的患者，经一般的促排卵治疗无成熟卵泡生长。']},
                {title:'项目服务',isImg:false,content:['· 多种促排方案','· IVF/ICSI体外受精与卵胞浆单精子注射','· 精子库','· 冻精冻卵','· 胚胎冷冻']},
                {isImg:true,content:['<%= linkPath %>/images/process/china/china2.jpg','<%= linkPath %>/images/process/china/china3.jpg']}
            ],
            [
                {title:'标准试管服务流程',isImg:true,content:['<%= linkPath %>/images/process/meiguo/process.jpg']},
                {title:'试管服务内容',isImg:false,content:['· 周期性超声检查（从药物开始，一直到移植）现场周期中检测 ','· 在治疗周期期间的诊室就诊和试验室试验（仅雌二酮以及黄体酮测试）','· 一次取卵手术 ','· 一次移植手术','· 实验室和手术室设施费','· 会诊 ','· 男性和女性传染病验血实验室检测 ','· 针对男性和女性的遗传检测','· 精子分析和精子冷冻（单精子提供者）','· IVF实验室和手术设施费用','· 胚胎移植前遗传筛选，性别筛查（12个胚胎以内）','· 取卵麻醉','· 卵胞浆内单精子注射（一个精子提供者）']},
                {title:'适应人群',isImg:false,content:['有一定经济能力，适合对试管成功率要求很高以及有特殊要求（如：借卵、代孕）的备孕妈妈']},
                {title:'项目服务',isImg:false,content:['· IVF/ICSI体外受精与卵胞浆单精子注射','· PGS/PGD胚胎移植前基因筛查和基因诊断,','· 卵子捐赠','· 胚胎捐赠','· 精子库' ]},
                {title:'需要自理',isImg:false,content:['· 胚胎存储续费','· 超过12个胚胎的基因检测费用','· 孕早期10周怀孕检测','· 移植后药费','· 外部检测','· 仅收取医疗费用，生活费用、机票费用均自理']},
                {isImg:true,content:['<%= linkPath %>/images/process/meiguo/meiguo1.jpg',
                        '<%= linkPath %>/images/process/meiguo/meiguo2.jpg',
                        '<%= linkPath %>/images/process/meiguo/meiguo3.jpg',
                        '<%= linkPath %>/images/process/meiguo/meiguo4.jpg',
                    ]}
            ],
            [
                {title:'标准试管服务流程',isImg:true,content:['<%= linkPath %>/images/process/thailand/process.jpg']},
                {title:'试管服务内容',isImg:false,content:['· 治疗过程全程咨询、跟踪治疗期间服务；','· 协助办理顾客夫妇签证、结婚证公证；','· 提供在泰国诊疗期间全程专人陪同就诊，协助处理相关生活问题； ','· 提供第三代试管婴儿术前排查和综合评估及治疗建议；','· 提供国内专科医院生殖科室对客人夫妇专业检测项目约30来项；','· 提供国内专科医院生殖科室根据泰国医生方案针对客人应用纯进口促排药使用和管控；',
                        ' · 提供客户夫妇单次有以下几个城市去曼谷机票来回一份（逾期或升舱费用自理）； ',' · 提供专人陪同第一次就诊。同泰国著名第三代试管婴儿专家面对面交流，并移交由泰国院方，对接方便中文沟通的工作人员；','· 泰国医疗机构：挂号、预约、就诊、抽血、注射、标本送检、一次性手术包使用、麻醉费、手术后观察费等；','· 专人陪同就诊，协助沟通，病历、检查、治疗等相关翻译； ',
                        ' · 泰国方面基本检查：如：血液常规、激素六项、B超、AMH抗苗勒氏管激素检测；','· 胚胎植入前数百种遗传疾病监测可以对象，胚胎植入前23对染色体异常疾病排查；','· 胚胎植入后11天监测血HCG；','· 取卵手术相关费用、胚胎冷冻、胚胎培养、胚胎孵化；',' · 诊疗期间所需常规药品帮助； · 胚胎冷冻8个以内（有效时间1年）；',' · 安排在泰国试管婴儿治疗期间温馨套房15天住宿；',
                        '· 受孕成功后整个孕期健康指导。',' · 辅助孵化技术 · 胚胎冷冻以及第一年的存储费用（一个精子提供者）','· 一次孕检（雌二酮，黄体酮，验孕测试） ','· 促排卵以及移植前药物']},
                {title:'适应人群',isImg:false,content:['有特殊需求，经济尚可，希望更高性价的家庭']},
                {title:'项目服务',isImg:false,content:['· 分析AMH水平 ',' · 精液样本采集','· 精液分析 ','· 冻精冻卵','· IVF/ICSI体外受精与卵胞浆单精子注射','· 经皮附睾精子抽吸术/睾丸附睾取精（PESA/TESE）','· 囊胚培养 ','· 辅助孵化','· PGS/PGD胚胎移植前基因筛查和基因诊断','· 胚胎冷冻 ','· 代孕','· 细胞冻存、冻精冻卵','· HART洗精服务' ]},
                {title:'赠送服务',isImg:false,content:['· 24小时中文人工服务热线；',' · 赠送护照延期居留泰国1次；','· 提供本中心指定住宿至医疗中心往返车辆接送8次；','· 怀孕8周后DNA性别鉴定咨询服务；','· 提供境外意外保险一份']},
                {title:'需要自理',isImg:false,content:['· 胚胎存储续费','· 超过12个胚胎的基因检测费用','· 孕早期10周怀孕检测','· 移植后药费','· 外部检测']},
                {isImg:true,content:['<%= linkPath %>/images/process/thailand/price1.jpg',
                        '<%= linkPath %>/images/process/thailand/price2.jpg',
                        '<%= linkPath %>/images/process/thailand/price3.jpg',
                        '<%= linkPath %>/images/process/thailand/price4.jpg',
                    ]}
            ],
            [
                {title:'标准试管服务流程',isImg:true,content:['<%= linkPath %>/images/process/malaysia/process.jpg']},
                {title:'试管服务内容',isImg:false,content:['· 前期咨询及医生面诊','· 促排卵：医生诊断，促排用药','· 取卵及胚胎培养：超声引导下的取卵，麻醉及镇静药物，精子准备 ',' · 取卵后用药，实验室设备操作，卵胞浆单精子注射，胚胎培养',' · 胚胎植入前基因筛查PGS：23对染色体筛查，aCGH8个胚胎或NGS6个胚胎 ','· 胚胎冷冻 · 胚胎解冻和冻胚解冻：胚胎解冻，胚胎培养，胚胎移植']},
                {title:'适应人群',isImg:false,content:['PGS适用人群','· 重复性流产','· 高龄人群',' · 多次试管失败','· 严重男性不育问题 ','· 染色体易位携带者 PGD适用人群','· 有家族基因遗传病史 ','· 怀上或已经有严重基因问题的孩子','· 男女双方其中任何一方患有家族遗传病','· 曾经因严重基因问题而被迫人工流产的经历 ','· 亲戚/家人已有怀上严重基因孩子的先例']},
                {title:'项目服务',isImg:false,content:['· 恒温箱孵化','&nbsp;&nbsp; sunfert中心的微型孵化器通过低氧水平模拟自然条件下的人体输卵管环境，同时保持适量的二氧化碳浓度，形成帮助胚胎生长的培养基。在孵化器内，胚胎在液态的培养基内生长，极大地提高了怀孕成功率。','· 胞浆内单精子注射技术','&nbsp;&nbsp;  胞浆内单精子注射技术 ，选择最好的精子注入卵子内。','· 洗精术','· 睾丸无痛取精技术']},
                {isImg:true,content:['<%= linkPath %>/images/process/malaysia/price1.jpg','<%= linkPath %>/images/process/malaysia/price2.jpg']},
            ],
            [
                {title:'标准试管服务流程',isImg:true,content:['<%= linkPath %>/images/process/russia/process.jpg']},
                {title:'试管服务内容',isImg:false,content:['· 前期咨询（女性）：医生首诊咨询，女方血液检查，荷尔蒙检查，阴道超生','· 前期咨询（男性）：医生首诊咨询，以及男方血液检查和精液分析',' · 促排卵：医生诊断，促排用药，荷尔蒙检测，阴道超声监控','· 取卵及胚胎培养：超声引导下的取卵，麻醉及镇静药物，精子准备 ',' · 取卵后用药，实验室设备操作，卵胞浆单精子注射，胚胎培养',' · 胚胎植入前基因筛查PGS：23对染色体筛查，aCGH8个胚胎或NGS6个胚胎 ',
                        ' · 胚胎冷冻  ','· 胚胎解冻和冻胚解冻：胚胎解冻，胚胎培养，胚胎移植以及医生建议的胚胎移植后用药']},
                {title:'适应人群',isImg:false,content:['有特殊需求的孕妈妈，如捐卵、代孕']},
                {title:'项目服务',isImg:false,content:['· 多种促排方案：辅助生殖中心的医生会根据卵子提供者的身体情况，制定不同的促排方案，确保取卵效果最大化。',' · IVF/ICSI体外受精与卵胞浆单精子注射 ',' · PGS/PGD胚胎移植前基因筛查和基因诊断 ','· 经皮附睾精子抽吸术/睾丸附睾取精（PESA/TESE）',' · 卵子/精子/胚胎冷冻保存。玻璃化冷冻技术',' · 胚胎运输','· 冷冻胚胎移植 ']},
                {title:'赠送服务',isImg:false,content:['· 办理出国签证及购国际机票','· 专车接送机 ','· 赠送俄罗斯本地电话卡及流量','· 赠送境外旅行保险','· 俄罗斯医院建档及医疗行程安排 ','· 医疗翻译和生活翻译服务，24小时优质服务','· 公寓住宿30天','· 资深顾问全程温馨提示及心理辅导']},
                {title:'需要自理',isImg:false,content:['· 胚胎的冷冻储存','· 超过8个的aCGH筛查',' · 超过6个的NGS筛查','· 若客户要求更换舱位、改签机票所产生的手续费和差价，由客户自行决定并另行结算','· 若要更换俄罗斯住宿标准，由客户自行决定并另行结算']},
                {isImg:true,content:['<%= linkPath %>/images/process/russia/price1.jpg',
                        '<%= linkPath %>/images/process/thailand/price2.jpg',
                        '<%= linkPath %>/images/process/thailand/price3.jpg',
                        '<%= linkPath %>/images/process/thailand/price4.jpg',
                    ]}
            ]

        ]

        var resetContainer = function (index) {
            var str = '';
            mapArr[index].forEach(function (v) {
                str +='<div class="items">';
                if(v.title && v.title != ''){
                    str += getTitle(v.title);
                }
                if(v.content.length > 0){
                    if(v.isImg){
                        str += getImgStr(v.content);
                    }else {
                        str += getTextList(v.content);
                    }
                }
                str += '</div>';
            })

            $('.processBox').html(str)
        }

        resetContainer(0) ; //初始化 进来渲染第一个  国内
    });
</script>
